<template>
  <div class="container">
    <el-dialog title="题目预览" :visible="PreviewShow" :close-on-click-modal="false" :before-close="cancel">
      <el-row :gutter="20">
        <el-col :span="6"> 【题型】: {{ form.questionType | questionTypefilters }} </el-col>
        <el-col :span="6"> 【编号】: {{ form.id }} </el-col>
        <el-col :span="6"> 【难度】: {{ form.difficulty | difficultyfilters }} </el-col>
        <el-col :span="6"> 【标签】: {{ form.tags }} </el-col>
      </el-row>
      <el-row :gutter="20" class="rowtwo">
        <el-col :span="6"> 【学科】: {{ form.subjectName }} </el-col>
        <el-col :span="6"> 【目录】: {{ form.directoryName }} </el-col>
        <el-col :span="6"> 【方向】: {{ form.direction }} </el-col>
      </el-row>
      <div class="line"></div>
      <div>【题干】:</div>
      <div class="subject" v-html="form.question"></div>
      <div v-if="form.questionType !== '3'">
        {{ form.questionType | questionTypefilters }} 选项:（以下选中的选项为正确选项）
      </div>
      <!-- 单选 -->
      <el-radio-group v-model="radio" v-if="form.questionType == '1'">
        <div class="myrow" v-for="item in form.options" :key="item.id">
          <el-radio :label="item.id">{{ item.title }}</el-radio>
        </div>
      </el-radio-group>
      <!-- 多选 -->
      <el-checkbox-group v-model="checkList" v-if="form.questionType == '2'">
        <div class="myrow" v-for="item in form.options" :key="item.id">
          <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
        </div>
      </el-checkbox-group>
      <div class="line"></div>
      <div>
        【参考答案】: <el-button type="danger" size="mini" @click="videoShow = true">视频答案预览</el-button>
        <div><video :src="form.videoURL" controls v-if="videoShow"></video></div>
      </div>
      <div class="line"></div>
      <div class="answer">
        【参考解析】:
        <span v-html="form.answer"></span>
      </div>
      <div class="line"></div>
      <div>【题目备注】: {{ form.remarks }}</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入基础题库详情
import { detail } from '@/api/hmmm/questions.js'
//导入目录详情
import { detail as details } from '@/api/hmmm/directorys.js'
export default {
  //从外界传入（控制题目预览的显示与隐藏）
  props: ['PreviewShow'],
  data() {
    return {
      //表单数据源
      form: {},
      //单选选中项
      radio: '',
      //复选框选中项
      checkList: [],
      //控制视频的显示与隐藏
      videoShow: false
    }
  },
  methods: {
    //获取基础题库详情
    async list(id) {
      // console.log(id)
      const { data: res } = await detail({ id: id })
      // console.log(res)
      //修改目录名称
      const { data: res1 } = await details(res)
      console.log(res1)
      // 将得到的数据赋值给 form
      this.form = { ...res, ...res1.directoryName }
      //调用答案选中项方法
      this.getradio(res)
    },
    //定义一个方法来获取答案选中项
    getradio(data) {
      //单选
      if (data.questionType == '1') {
        const readradio = data.options.find(item => item.isRight == 1)
        //得到单选答案选中项
        this.radio = readradio.id
        //多选
      } else if (data.questionType == '2') {
        const checkbox = data.options.filter(item => item.isRight == 1)
        //得到多选答案选中项
        checkbox.forEach(item => {
          this.checkList.push(item.id)
        })
        // console.log(checkbox)
      }
    },

    //关闭预览面板
    cancel() {
      this.$emit('update:PreviewShow', false)
      //关闭视频
      this.videoShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .rowtwo {
    margin: 20px 0;
  }
  .line {
    width: 100%;
    height: 1px;
    margin: 10px 0;
    border-bottom: 1px solid #ccc;
  }
  .subject {
    margin: 10px 0;
    color: blue;
  }
  .myrow {
    margin: 20px 0;
  }
  .answer {
    display: flex;
    align-items: center;
  }
}
</style>
